<template>
    <div class="modal_signin_info">
        <div v-if="type === 2 || type === 3" class="signin_success_header">
            <span class="icon_money" :class="[{ isMonth: singInSucInfo.month }]"></span>
            {{ $currencyMoney(singInSucInfo.money) }}
        </div>
        <div v-if="singInSucInfo.week && !singInSucInfo.month && type === 2" class="signin_success_week">
            <span :class="[{active: singInSucInfo.weekNum >= item}]" v-for="(item) in Array.from({ length: 4 }, (_, index) => index + 1)" :key="item">
                <div v-if="singInSucInfo.weekNum >= item" class="icon_checked"></div>{{ t('activity_page_signWeek' + item) }}
            </span>
        </div>
        <div class="signin_success_desc" v-html="signinSuccessDesc"></div>
        <div class="btns_wrap">
            <nut-button @click="closeHandle" class="btn_b">{{ t('confirm') }}</nut-button>
        </div>
        <div class="notice">{{ signinSuccessBottomBotice }}</div>
    </div>        
</template>
<script lang="ts" setup>
import { computed, defineEmits } from 'vue'
import { useI18n } from "vue-i18n";
import { currencyMoney } from "@/utils/publicMethods";

const { t } = useI18n();
const emit = defineEmits(["close"]);
const props = defineProps({
    singInSucInfo: {
        type: Object,
        default: {}
    },
    type: {
        type: Number
    },
    maxLevelData: {
        type: Object,
        default: {}
    }
})


// 签到成功提示消息
const signinSuccessDesc = computed(() => {
    // 完成今日签到提示
    if (props.type === 5) {
        return t('activity_page_needSign')
    } else {
        if (props.singInSucInfo.month) {
            return t('activity_page_sign_successMonth', { money: currencyMoney(props.singInSucInfo.money, 2, true) })
        } else if (props.singInSucInfo.week) {
            return t('activity_page_sign_successWeek', { week: props.singInSucInfo.weekNum, money: currencyMoney(props.singInSucInfo.money, 2, true) })
        }
        return t('activity_page_sign_successDay', { money: currencyMoney(props.singInSucInfo.money, 2, true) })
    }
})

// 签到成功底部红色消息
const signinSuccessBottomBotice = computed(() => {
    if (props.type === 5) {
        return t('activity_page_sevenDays')        
    } else {
        if (props.singInSucInfo.month) {
            return t('activity_page_sign_successNoticeMonth')
        } else if (props.singInSucInfo.week) {
            return t('activity_page_sign_successNoticeWeek')
        }
        if (props.singInSucInfo.money === props.maxLevelData.day) {
            return t('activity_page_sign_getTop')
        } else {
            return t('activity_page_sign_successNoticeDay')
        }
    }
})

const closeHandle = () => {
    emit("close");
}

</script>
<style lang="scss" scoped>
.modal_signin_info {
    .signin_success_week {
        display: flex;
        height: 28px;
        border-radius: 8px;
        overflow: hidden;
        color: #A8A8CA;
        background: #282845;
        margin-bottom: 8px;
        .icon_checked {
            width: 14px;
            height: 14px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 2px;
            background: url("/imgs/activity/signIn/icon_checked_white.png") no-repeat;
            background-size: 100% 100%;
        }
        span {
            display: inline-flex;
            width: 25%;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            height: 28px;
            &.active {
            color: #FFFFFF;
            background: #1DBA8B;
            }
        }
    }
    .signin_success_header {
        text-align: center;
        color: #FFB327;
        font-size: 16px;
        margin: 10px 0;
        .icon_money {
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 1px;
            background: url("/imgs/activity/signIn/icon_coin7.png") no-repeat;
            background-size: 100% 100%;
            transform: translateY(-2px);
            &.isMonth {
            background: url("/imgs/activity/signIn/icon_coin30.png") no-repeat;
            background-size: 100% 100%;
            transform: translateY(-3px);
            }
        }
    }
    .signin_success_desc {
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        :deep(.highlight) {
            color: #FFB327;
        }
    }
}
</style>